<template>
	<div>
		<el-table border :data="tableData" style="width: 100%">
			<el-table-column header-align="center" type="index"> </el-table-column>
			<el-table-column label="姓名" width="180" prop="username">
			</el-table-column>
			<el-table-column label="邮箱" width="180" prop="email"> </el-table-column>
			<el-table-column
				header-align="center"
				align="center"
				prop="mobile"
				label="电话"
			>
			</el-table-column>
			<el-table-column
				header-align="center"
				align="center"
				prop="role_name"
				label="角色"
			>
			</el-table-column>
			<el-table-column
				header-align="center"
				align="center"
				prop="prop"
				label="状态"
			>
				<!-- 插槽 -->
				<template v-slot="scope">
					<el-switch
						@change="changeState(scope.row)"
						v-model="scope.row.mg_state"
					></el-switch>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button
						size="mini"
						icon="el-icon-edit"
						@click="handleEdit(scope.row)"
					></el-button>
					<el-button
						size="mini"
						type="danger"
						icon="el-icon-edit"
						@click="handleDelete(scope.row)"
					></el-button>
					<el-button
						size="mini"
						type="danger"
						icon="el-icon-setting"
						@click="handleSetting(scope.row)"
					></el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 弹出层 -->
		<ComLog
			:form="form"
			:type="type"
			:roules="roules"
			@enterChange="enterChange"
			v-bind:dialogFormVisible.sync="dialogFormVisible"
		></ComLog>
	</div>
</template>

<script>
import { changeStateApi, queryUserApi, resetUserApi } from '@/api/users'
import { getRolesApi, setUserRolesApi } from '@/api/roles'
export default {
	props: {
		tableData: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			dialogFormVisible: false,
			form: {},
			// 全部的角色数据
			roules: [],
			// 弹窗的类型
			type: 'roule',
		}
	},
	methods: {
		// 确认修改用户的回调函数
		enterChange({ id, email, mobile, type, rids, roleId }) {
			// 需要关闭窗口
			this.dialogFormVisible = false
			// type === roule 选择角色，否则是修改信息
			if (type === 'roule') {
				setUserRolesApi(roleId, rids).then(({ data }) => {
					console.log(data)
				})
				return
			}

			resetUserApi(id, { email, mobile }).then(({ data }) => {
				// 重新的请求一次数据
				this.$emit('refresh')
			})
		},
		// 修改用户状态
		changeState({ id, mg_state }) {
			changeStateApi(id, mg_state).then(({ data }) => {
				if (data.meta.status === 200) {
					this.$message.success('修改成功！')
				}
			})
		},
		// 通过id查询用户信息
		queryUserInfo({ id }) {
			return queryUserApi(id).then((data) => {
				return data.data
			})
		},
		handleEdit(data) {
			this.roules = []
			this.type = 'reset'
			this.queryUserInfo(data).then(({ data }) => {
				this.form = data
				// 请求用户数据成功后，开启弹出层
				this.dialogFormVisible = true
			})
		},
		handleDelete() {},
		// 选择角色
		handleSetting(_data) {
			this.type = 'roule'
			getRolesApi().then(({ data }) => {
				this.roules = data.data
				this.form = _data
				// 请求用户数据成功后，开启弹出层
				this.dialogFormVisible = true
			})
		},
	},
	components: {
		ComLog: () => import('./ComLog.vue'),
	},
}
</script>

<style>
</style>